@mixin snapcraft-distro-chart {

  $bar-color: #084081;
  $color-transparent-white: rgba(255, 255, 255, 0);

  .snapcraft-distro-chart {
    &-container {
      position: relative;
    }

    &.is-collapsed {
      max-height: 375px;
      overflow: auto;

      @media screen and (min-width: $breakpoint-x-large) {
        max-height: 420px;
      }

      @media screen and (min-width: $breakpoint-medium) and (max-width: $breakpoint-large) {
        max-height: 255px;
      }

      @media screen and (max-width: $breakpoint-medium) {
        max-height: 190px;
        overflow: hidden;
      }
    }


    &__names,
    &__bars {
      display: block;
      float: left;
      min-height: 1px;
      position: relative;
    }

    &__names {
      width: 8rem;
    }

    &__bars {
      margin-left: 1rem;
      margin-top: 0;
      width: calc(100% - 9rem);
    }

    &__name {
      font-size: .75rem;
      line-height: 1rem;
      margin-top: 1px;
      overflow: hidden;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__bar {
      background: $bar-color;
      clear: left;
      float: left;
      height: 1px;
      margin: .53125rem 0 .46875rem;
    }

    &__more {
      background: linear-gradient($color-transparent-white, $color-x-light 80%);
      bottom: 0;
      height: 68px;
      padding-top: 3rem;
      position: absolute;
      width: 100%;
    }
  }
}
